<template>
  <div class="left">
    <div class="left-title-list">
      <div class="flex">
        <div class="title-item1">销售公司、经销商投标项目</div>
        <div class="title-item2">总部投标项目</div>
      </div>
      <div class="daochu">
        <span class="daochu-font">导出图表</span>
        <img src="../assets/img/daochu.png" style="width:19px;height:19px;margin-left:6px" alt />
      </div>
    </div>
    <div class="timelist">
      <DatePicker style="width:146px" class="m-l22"></DatePicker>
      <DatePicker style="width:146px" class="m-l11"></DatePicker>
      <div class="timelist-item m-l20">上个月</div>
      <div class="timelist-item m-l11">上季度</div>
      <div class="timelist-item m-l11">上半年</div>
      <div class="timelist-item m-l11">上冷年</div>
      <div class="timelist-item m-l11">上财年</div>
      <div class="m-l20 bgc"></div>
    </div>
    <div class="kuan">
      <div class="leiji">累计授权项目总数</div>
      <div class="kk"></div>
      <div class="flex" style="margin-top:53px；width: 100%;margin-top:53px;display: flex;justify-content: center">
        <div class="zhn">十万</div>
        <div class="zhn m-l5">万</div>
        <div class="zhn m-l5">千</div>
        <div class="zhn" style="margin-left:25px"></div>
        <div class="zhn m-l5"></div>
        <div class="zhn m-l5"></div>
        
        
      </div>
      <div class="flex" style="margin-top:4px；width: 100%;display: flex;justify-content: center">
        <div class="zheng"></div>
        <div class="zheng m-l5"></div>
        <div class="zheng m-l5"></div>
        <div class="zheng" style="margin-left:25px"></div>
        <div class="zheng m-l5"></div>
        <div class="zheng m-l5"></div>
      </div>
      <div class="flex" style="width: 100%;display: flex;justify-content: center">
        <div class="zheng mt-2">
          <span class="apan-font">1</span>
        </div>
        <div class="zheng m-l5 mt-2">
          <span class="apan-font">8</span>
        </div>
        <div class="zheng m-l5 mt-2">
          <span class="apan-font">1</span>
        </div>
        <div class="zheng mt-2" style="margin-left:25px">
          <span class="apan-font">1</span>
        </div>
        <div class="zheng m-l5 mt-2">
          <span class="apan-font">1</span>
        </div>
        <div class="zheng m-l5 mt-2">
          <span class="apan-font">1</span>
        </div>
      </div>
    </div>
    <div class="faguan"></div>

    <!-- 图表1 -->
    <div class="biao-one">
      <div class="kk">
        <div class="biao-one-title">各地区授权项目反馈情况</div>
      </div>
      <div ref="chart" style="width:100%;height:340px;margin-top:30px"></div>
    </div>

    <p style="margin-top:12px;display:flex;text-overflow:ellipsis;white-space: nowrap;">
       <span style="color:#7AF6FF;font-size:13px;font-weight:Medium;font-family:PingFangSC-Medium,PingFang SC;">反馈数量  </span>  
       <span style="color:#FFFFFF:font-size:12px;font-weight:Medium;font-family:PingFangSC-Medium,PingFang SC;">  : <span> </span> <span> </span> <span> </span> 已在商用信息管理系统反馈项目跟进结果的项目数量。反馈数量=中标数量+丢单数量+项目暂停数量</span>
    </p>

    <!-- 图表2 -->
    <div class="biao-one2">
      <div class="kk">
        <div class="biao-one-title">各行业授权项目数量情况</div>
      </div>
      <div ref="tow" style="width:100%;height:340px;margin-top:30px"></div>
    </div>

  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  mounted() {
    this.onEecharts();
    this.towEecharts();
  },
  methods: {
    onEecharts() {
      let myBarChar = this.$echarts.init(this.$refs.chart);
      myBarChar.setOption({
            tooltip: {
            trigger: "axis",
            axisPointer: {
                // 坐标轴指示器，坐标轴触发有效
                type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
            }
            },
            grid: {
             right:"8%"
            },
           legend: {
                data: ['反馈数量', '跟进中数量', '平均反馈率',"反馈率"],
                left:"4%",
                textStyle:{
                    color:"#fff"
                }
            },
            xAxis: [
            {
                type: "category",
                data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
                axisTick: {
                 alignWithLabel: true
                },
                axisLine:{
                    lineStyle:{
                        color:"#fff"
                    },
                },
                 axisLabel:{
                     rotate:-40
                }
            }
            ],
            yAxis: [
              { 
                type: "value",
                axisLine:{
                    lineStyle:{
                        color:"#fff"
                    },
                    show:false
                },
                axisLabel:{
                    margin:20,
                }
             },
             {
          name: "%",
          min: 0,
          max: 100,
          axisLabel: {
            show: true,
            interval: "auto", //居中显示
            formatter: "{value}%", //以百分比显示
            color:"#fff"
          },
          splitLine: {
            show: false
          }
        }
            ],
            series: [
                   {
                        name: '反馈数量',
                        type: 'bar',
                        data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
                        itemStyle:{
                            color:"#EA8964"
                        },
                         barGap:"-60%"
                    },
                    {
                        name: '跟进中数量',
                        type: 'bar',
                        data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
                        itemStyle:{
                            color:"#4E7CDB"
                        },
                        barGap:"-60%"
                    },
                    {
                        name: '平均反馈率',
                        type: 'line',
                        data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2],
                        itemStyle:{
                            color:"#FF7575"
                        },
                        barGap:"-60%"
                    },
                    {
                        name: '反馈率',
                        type: 'line',
                        data: [2.0, 22.2, 31.3, 43.5, 6, 10, 20, 2.44, 22.0, 11.5, 12.0, 64.2],
                        itemStyle:{
                            color:"#C7FFC6"
                        },
                        barGap:"-60%"
                    }
            ]
      });
      return myBarChar
    },



    towEecharts(){
       let myBarChar = this.$echarts.init(this.$refs.tow);
        myBarChar.setOption({
               grid:{
                  right:"0%"
                },
                 tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b} : {c} ({d}%)'
                },
               
                legend: {
                    orient: 'vertical',
                    bottom : 34,
                    left:28,
                    textStyle:{
                    color:"#fff"
                    },
                    data: ['房地产(业务一科)', '公共建筑(业务二科)', '工业制造（业务三科）', '商业项目（业务四科）', '采暖及清洁能源(业务五科)',"轨道交通（业务六科）",'数据通讯（业务七科）','冷冻冷藏（业务八科）',"其他"]
                },
                series: [
                        {
                            name: '访问来源',
                            width:"auto",
                            type: 'pie',
                            radius: ['50%', '70%'],
                            center: ['60%', '50%'],
                            avoidLabelOverlap: true,
                            label: {
                                 formatter: '{b} \n  {d}%  ',
                                 position:"outside",
                                 color:"#fff"
                            },
                            labelLine: {
                                normal: {
                                    show: true
                                }
                            },
                            data: [
                                {value: 335, name: '房地产(业务一科)'},
                                {value: 310, name: '公共建筑(业务二科)'},
                                {value: 234, name: '工业制造（业务三科）'},
                                {value: 135, name: '商业项目（业务四科）'},
                                {value: 1548, name: '采暖及清洁能源(业务五科)'},
                                {value:1888,name:"轨道交通（业务六科）"},
                                {value:1888,name:"数据通讯（业务七科）"},
                                {value:1888,name:"冷冻冷藏（业务八科）"},
                                {value:1888,name:"其他"}
                            ]
                        }
                    ]
        })
         return myBarChar
    }
  }
};
</script>

<style scoped lang="less">
 /deep/ .ivu-input{
                    height:30px;
                    background-color: #06425C;
                    border: none;
                    color:rgba(255,255,255,0.5);
                }

                /deep/ .ivu-input-suffix i{
                    line-height: 30px;
                    
                }
.flex {
  display: flex;
}
.left {
  width: 100%;
  margin-top: 42px;
  .left-title-list {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .title-item1 {
      width: 234px;
      height: 36px;
      font-size: 16px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: rgba(255, 255, 255, 0.8);
      line-height: 36px;
      text-align: center;
      background-image: url("../assets/img/bj.png");
      background-size: 100% 100%;
    }
    .title-item2 {
      width: 164px;
      height: 36px;
      font-size: 16px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: rgba(255, 255, 255, 0.8);
      margin-left: 24px;
      line-height: 36px;
      text-align: center;
      background-image: url("../assets/img/bj.png");
      background-size: 100% 100%;
    }
    .daochu {
      width: 118px;
      height: 30px;
      overflow: hidden;
      background: rgba(0, 228, 255, 1);
      border-radius: 16px;
      display: flex;
      justify-content: center;
      align-items: center;
      .daochu-font {
        font-size: 16px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(12, 16, 48, 1);
        height: 28px;
        line-height: 28px;
      }
    }
  }

  .timelist {
    margin-top: 34px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    /deep/ .ivu-input {
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: rgba(255, 255, 255, 0.5);
    }
    .m-l11 {
      margin-left: 12px;
    }
    .m-l20 {
      margin-left: 20px;
    }
    .bgc {
      height: 24px;
      width: 30px;
      background-image: url("../assets/img/wenhao.png");
      background-size: 100% 100%;
    }
    .timelist-item {
      height: 28px;
      width: 67px;
      overflow: hidden;
      background-color: rgba(6, 66, 92, 1);
      font-size: 12px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: rgba(255, 255, 255, 0.5);
      line-height: 28px;
      text-align: center;
      border-radius: 2px;
    }
  }
  .kuan {
    height: 320px;
    width: 74%;
    padding: 13px;
    margin: 82px auto 0 auto;
    background-image: url("../assets/img/bianzu.png");
    background-size: 100% 100%;
    padding-top: 31px; 
    .leiji {
      font-size: 20px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: rgba(255, 255, 255, 1);
      text-align: center;
    }
    .kk {
      width: 239px;
      height: 19px;
      background: linear-gradient(
        90deg,
        rgba(38, 98, 219, 1) 0%,
        rgba(0, 210, 255, 0.28) 100%
      );
      border-radius: 17px;
      margin: -14px auto 0 auto;
    }
    .zheng {
      width: 71px;
      height: 52px;
      background: rgba(14, 64, 93, 1);
      box-shadow: 0px -2px 2px 0px rgba(0, 228, 255, 0.52);
      border-radius: 3px;
      border: 1px solid rgba(0, 228, 255, 1);
      position: relative;
      text-align: center;
      .apan-font {
        font-size: 60px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: rgba(255, 255, 255, 1);
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -80%);
      }
    }
    .zhn {
      width: 71px;
      height: 20px;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: rgba(255, 255, 255, 1);
      line-height: 20px;
      text-align: center;
    }
    .m-l5 {
      margin-left: 4px;
    }
    .mt-2 {
      margin-top: 2px;
    }
  }
  .faguan {
    width: 100%;
    height: 364px;
    background-image: url("../assets/img/faguan.png");
    background-size: 100% 100%;
    margin-top: -164px;
  }

  .biao-one {
    height: 400px;
    width: 100%;
    background-image: url("../assets/img/biankuan.png");
    background-size: 100% 100%;
    margin-top: 47px;
    border-top: 1px solid #0e0f33;
    .biao-one-title {
      font-size: 20px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: rgba(255, 255, 255, 1);
      text-align: center;
      margin-top: -16px;
    }
    .kk {
      width: 298px;
      height: 20px;
      background: linear-gradient(
        90deg,
        rgba(38, 98, 219, 1) 0%,
        rgba(0, 210, 255, 0.28) 100%
      );
      border-radius: 17px;
      margin: 0 auto;
      border-top: 1px solid rgba(38, 98, 219, 1);
    }
  }

  .biao-one2 {
    height: 400px;
    width: 100%;
    background-image: url("../assets/img/biankuan.png");
    background-size: 100% 100%;
    margin-top: 45px;
    border-top: 1px solid #0e0f33;
    .biao-one-title {
      font-size: 20px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: rgba(255, 255, 255, 1);
      text-align: center;
      margin-top: -16px;
    }
    .kk {
      width: 298px;
      height: 20px;
      background: linear-gradient(
        90deg,
        rgba(38, 98, 219, 1) 0%,
        rgba(0, 210, 255, 0.28) 100%
      );
      border-radius: 17px;
      margin: 0 auto;
      border-top: 1px solid rgba(38, 98, 219, 1);
    }
  }
}
</style>
